<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>simple-blog</title>
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/jquery.sPage.css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="/js/jquery.sPage.js"></script>
  <script src="/js/utils.js"></script>
</head>
<body>
  <header class="header wrapper">
    <div class="welcome">
      <%= session && session.user ? `欢迎，${session.user}！` : '欢迎注册登录！' %>
    </div>
    <ul class="nav">
      <li class="nav-item <%= type === 'all' ? 'active' : '' %>"><a href="/articles"></a>全部文章</li>
      <% if(session && session.user) { %>
      <li class="nav-item <%= type === 'self' ? 'active' : '' %>"><a href="/articles?author=<%= session.user %>"></a>我的文章</li>
      <li class="nav-item <%= (type === 'create' || type === 'edit') ? 'active' : '' %>"><a href="/create"></a>发表文章</li>
      <li class="nav-item"><a class="logout" ></a>登出</li>
      <li class="nav-item center"><img src="/img/avatar/<%= session.avatar %>" class="avatar" alt="avatar" /></li>
      <% } else { %>
      <li class="nav-item <%= type === 'register' ? 'active' : '' %>"><a href="/register"></a>注册</li>
      <li class="nav-item <%= type === 'login' ? 'active' : '' %>"><a href="/login"></a>登录</li>
      <% } %>
    </ul>
  </header>
<script>
$(function() {
  // 登出
  $('.logout').click(() => {
    $.ajax({
      url: '/logout',
      success: (res) => {
        if (res.code === 200) {
          message('登出成功')
          setTimeout(() => {
            window.location.href = '/'
          }, 1000)
        }
      },
      error: () => {
        message('登出失败')
      }
    })
  })
})
</script>
